<template>
  <el-container style="min-width: 1400px;">
    <el-header style="
        z-index: 999;
        padding: 0;
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      ">
      <menu-bar></menu-bar>
    </el-header>
    <el-main style="padding: 0; margin: 0">
      <div style="height: 100px"></div>
      <div style="max-width: 1400px; margin: auto">
        <el-card style="
            position: relative;
            background-size: cover;
            background-image: url(https://pic3.zhimg.com/v2-e27b6692c148f856de9ff7da8a23c046_r.jpg);
          ">
          <el-avatar style="position: relative; left: 50%; margin-left: -40px" :size="80" :src="user.avatar">
          </el-avatar>
          <p style="text-align: center">
            <el-link style="margin: 20px 0; font-size: 18px; color: #222222">{{user.nickname}}</el-link>
          </p>
          <div
            style="position: absolute; text-align: center;color: #222222;width: 260px;height: 65px;bottom: 0;right: 0;">
            <el-row>
              <el-col :span="8">关注</el-col>
              <el-col :span="8">粉丝</el-col>
              <el-col :span="8">获赞</el-col>
            </el-row>
            <el-row style="margin-top: 6px;">
              <el-col :span="8">{{ user.followCount }}</el-col>
              <el-col :span="8">{{ user.fanCount }}</el-col>
              <el-col :span="8">{{ user.loveCount }}</el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 从此处开始写代码 -->
        <el-row>
          <el-col :span="4">
            <el-menu style="float: left; width: 100%" default-active="details" class="el-menu-vertical-demo"
              :router="true">
              <el-menu-item index="details">
                <i class="el-icon-postcard"></i>
                <span slot="title">个人信息
                </span>
              </el-menu-item>
              <el-menu-item index="modifyHeadImage">
                <i class="el-icon-picture-outline"></i>
                <span slot="title">修改头像</span>
              </el-menu-item>
              <el-menu-item index="myMessages">
                <i class="el-icon-bell"></i>
                <span slot="title">我的消息</span>
              </el-menu-item>
              <el-menu-item index="myArticle" v-if="isNormal">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">我的文章</span>
              </el-menu-item>
              <el-menu-item index="review" v-if="review">
                <i class="el-icon-edit-outline"></i>
                <span slot="title">媒体审核</span>
              </el-menu-item>
              <el-menu-item index="myCollection">
                <i class="el-icon-star-off"></i>
                <span slot="title">我的收藏</span>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="20" style="padding: 20px 40px">
            <router-view />
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-footer style="padding: 0; margin: 0">
<!--      <page-footer></page-footer>-->
    </el-footer>
  </el-container>
</template>

<script>
import MenuBar from '@/components/MenuBar.vue'
import PageFooter from '@/components/PageFooter.vue'
export default {
  components: { MenuBar, PageFooter },
  data() {
    return {
      userId:"",
      user: {
      },
      isNormal:false,
      review:false,
    }
  },

  created() {
    this.getCurrentUserInfo();
  },

  methods:{
    getCurrentUserInfo() {
      this.axios.get("/user/personal").then(({ data }) => {
        if(data.state == 20000){
          this.user = data.data
          if(data.data.role == "媒体"){
            this.isNormal = true;
            this.review = false;
          }else{
            this.review = true;
          }
        }else {
          this.$message.error(data.message);
        }

      })
    },

  }

}
</script>

<style>
* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
